import { Carousel, Flex, Grid } from 'antd-mobile';
import axios from 'axios';
import React, { Component } from 'react';
import Nav1 from '../../assets/images/nav-1.png';
import Nav2 from '../../assets/images/nav-2.png';
import Nav3 from '../../assets/images/nav-3.png';
import Nav4 from '../../assets/images/nav-4.png';
import SearchHeader from '../../components/SearchHeader';
import { getLocation } from '../../utils/index';
import './index.scss';

const navs = [
  { img: Nav1, title: '整租', path: '/home/rent' },
  { img: Nav2, title: '合租', path: '/home/rent' },
  { img: Nav3, title: '地图找房', path: '/map' },
  { img: Nav4, title: '去出租', path: '/rent' }
];

const data = Array.from(new Array(9)).map((_val, i) => ({
  icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
  text: `name${i}`,
}));
export default class Index extends Component {
  state = {
    swiper: [], // 轮播图
    groups: [],  // 租房小组
    newsList: [], // 最新资讯
    cityInfo: {}
  };

  componentDidMount() {
    this.getBannerData();
    this.getGroupData();
    this.getNewsData();


    this.getCitydata();

    // 通过百度地图API获取当前城市位置信息
    // var myCity = new window.BMap.LocalCity();
    // myCity.get(async (result) => {
    //   const res = await axios.get(`http://localhost:8080/area/info`, {
    //     params: {
    //       name: result.name
    //     }
    //   });
    //   this.setState({
    //     cityInfo: res.data.body
    //   });
    // });

  }

  async getCitydata() {
    const res = await getLocation();
    this.setState({
      cityInfo: res
    });
  }

  // 轮播图数据请求
  async getBannerData() {
    const res = await axios.get('http://localhost:8080/home/swiper');
    this.setState({
      swiper: res.data.body
    });
  }

  // 租房小组数据请求
  async getGroupData() {
    const res = await axios.get(`http://localhost:8080/home/groups`, {
      params: {
        area: `AREA%7C88cff55c-aaa4-e2e0`
      }
    });

    this.setState({
      groups: res.data.body
    });
  }

  // 最新资讯请求
  async getNewsData() {
    const res = await axios.get('http://localhost:8080/home/news', {
      params: {
        area: 'AREA%7C88cff55c-aaa4-e2e0'
      }
    });
    this.setState({
      newsList: res.data.body
    });
  }


  // 轮播图组件
  swiper() {
    if (this.state.swiper.length) {
      return (
        <Carousel
          autoplay={true}
          autoplayInterval={1000}
          infinite
        // beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
        // afterChange={index => console.log('slide to', index)}
        >
          {this.state.swiper.map(val => (
            <a
              key={val.id}
              href="http://www.alipay.com"
              style={{ display: 'inline-block', width: '100%', height: 212 }}
            >
              <img
                src={`http://localhost:8080${val.imgSrc}`}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                }}
              />
            </a>
          ))}
        </Carousel>
      );
    }
    return null;
  }

  // 导航栏组件
  navs() {
    return (
      <Flex className='nav'>
        {navs.map((v, i) => (
          <Flex.Item key={i} onClick={() => this.props.history.push(v.path)}>
            <img src={v.img} alt="" />
            <h2>{v.title}</h2>
          </Flex.Item>
        ))
        }
      </Flex>
    );
  }

  // 资讯组件
  newsitem() {
    return this.state.newsList.map(v => (
      <div className="news-item" key={v.id}>
        <img src={'http://localhost:8080' + v.imgSrc} alt="" className='item-img' />
        <div className="right">
          <div className="r-top">{v.title}</div>
          <div className='r-bottom'>
            <div className="r-bottom-left">{v.from}</div>
            <div className="r-bottom-right">{v.date}</div>
          </div>
        </div>
      </div>
    ));
  }

  render() {

    return (
      <div className='index-body'>

        {/* 轮播图 */}
        <div className='index-banner'>
          {this.swiper()}
          {/* 搜索框模块 */}
          <SearchHeader cityName={this.state.cityInfo.label}></SearchHeader>
        </div>

        {/* 导航模块 */}
        <div className='index-nav'>
          {this.navs()}
        </div>

        {/* 租房小组 */}
        <div className='group'>
          <h3 className='group-title'>
            租房小组
            <span className="more">更多</span>
          </h3>
          <Grid
            data={this.state.groups}
            activeStyle={false}
            columnNum={2}
            hasLine={false}
            square={false}
            activeStyle={false}
            renderItem={
              item => (
                <Flex className="group-item" justify="around">
                  <div className="desc">
                    <p className="title">{item.title}</p>
                    <span className="info">{item.desc}</span>
                  </div>
                  <img
                    src={'http://localhost:8080' + item.imgSrc}
                    alt=""
                  />
                </Flex>
              )
            }
          />
        </div>

        {/* 最新资讯 */}
        <div className='news'>
          <h2>最新资讯</h2>
          {this.newsitem()}
        </div>
      </div>
    );
  }
}
